<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Messages</title>

    </h:head>
     <f:view beforePhase="#{UserDisplayManagedBean.doDisplay}">
    <f:view beforePhase="#{MessageManagedBean.initViewSent}">
    <h:body>      
       
       <h:form prependId="false">
                    <p:growl id="msgs" showDetail="true"/>
                    <p:growl id="notif" showDetail="true"/>
                    <div id="top" class="top">
                        <h:graphicImage value="/image/newHeader.jpg"/>
                    </div>
                    <div id="content">
                        <p:poll interval="5"   
                                actionListener="#{MessageManagedBean.checkNewMessage}" update="notif" />
                        <table>
                            <tr>
                                <td>
                                    <p:toolbar style="font-size:12px;margin-top:0%;height:30px;width:200px"> 
                                        <p:toolbarGroup align="right" >
                                            <p:button title="Home" image="ui-icon-home" outcome="AdminDeptWorkspace"/>                                  
                                            <p:button title="Notes" image="ui-icon-note"/>                                    
                                            <p:button title="Mail" outcome="messages" image="ui-icon-mail-closed"/>                                    
                                            <p:button title="Edit Preferences" image="ui-icon-gear"/>                                   
                                            <p:button title="Help" image="ui-icon-help"/>
                                            <p:commandButton title="Log Out" immediate="true" type="submit" image="ui-icon-close" actionListener="#{UserManagedBean.doLogout}"/> 
                                        </p:toolbarGroup>
                                    </p:toolbar></td>

                         <td><h:graphicImage value="sent_email.png" style="width:40px;height:40px" />
                            <h:outputText value="         "/>
                            <h:outputText value="Sent Items" style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                            <p:spacer width="100" height="10"/></td>
                            </tr>

                            <tr><td>    
                                    <p:menu style="width:200px; height:300px; font-family: Tahoma; font-size:12px;border-style: double;">  
                                        <p:submenu label="Main Menu"  >  
                                            <p:menuitem style="font-size:12px;font-family:Tahoma"  value="Home" url="http://localhost:8080/MerlionERP-war/userManagement/index.xhtml" ajax="false" icon="ui-icon ui-icon-home"/>  
                                        </p:submenu>  
                                    </p:menu>
                                    <p:calendar mode="inline" style="font-size:11px;font-family:Tahoma"/>

                                </td>


                        <td style="vertical-align:top">
   
                          
                           
                            <p:toolbar style="font-size: 70%;width: 99.5%"> 
                                <p:toolbarGroup align="left">  
                                    <p:button value="New Message" outcome="createNewMessage" image="ui-icon-plus"/>
                                    <p:button value="Inbox" outcome="messages" image="ui-icon-mail-closed"/>
                                    <p:commandButton title="Delete" image="ui-icon ui-icon-trash"
                                                     value="Delete" oncomplete="deleteDialog.show()"  />  
                                    
                                </p:toolbarGroup>  

                            </p:toolbar> 

                   
                            <p:dataTable id="panel" 
                                         var="messages" value="#{MessageManagedBean.sentMsgList}"  
                                         paginator="true" rows="15" 
                                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"                                     
                                         rowsPerPageTemplate="15,25,35" style="font-size: 60%;width:100%"                     
                                         selection="#{MessageManagedBean.selectedMessages}"
                                         emptyMessage="No data found with given criteria" widgetVar="messageTable"> 
                         
                              
                                <f:facet name="header">                           
                                    <p:outputPanel style="text-align:right"  >
                                        <h:outputText value="Search all fields:" style="margin-left:820px" />  
                                        <p:inputText id="globalFilter" onkeyup="messageTable.filter()" style="right:-100px;width:150px" />  
                                    </p:outputPanel>
                                </f:facet>

                                <p:column selectionMode="multiple" style="border-left-color:transparent; border-right-color:transparent"/>


                                <p:column style="width: 20px;border-left-color:transparent;border-right-color:transparent"> 
                                    <!--DELETE-->
                                    <p:commandButton title="Delete" image="ui-icon ui-icon-trash" ajax="true" immediate="true"
                                                     update="panel" oncomplete="messagedialog.show()">
                                        <f:setPropertyActionListener target="#{MessageManagedBean.selectedMessage}"
                                                                     value="#{messages}"/>
                                    </p:commandButton>

                                </p:column>  
 
                                <p:column headerText="Sender" sortBy="#{messages.senderId}" filterBy="#{messages.senderId}"  filterStyle="width:150px" filterMatchMode="contains" style="border-left-color:transparent;border-right-color:transparent">  

                                    <h:outputText value="#{messages.senderId}" style="font-weight:bold" rendered="#{!messages.readByUser}" />  
                                    <h:outputText value="#{messages.senderId}" rendered="#{messages.readByUser}" />  

                                </p:column>  

                                 <p:column headerText="Sender Name" sortBy="#{messages.senderName}" filterBy="#{messages.senderName}"  filterStyle="width:150px" filterMatchMode="contains" style="border-left-color:transparent;border-right-color:transparent">  

                                    <h:outputText value="#{messages.senderName}" style="font-weight:bold" rendered="#{!messages.readByUser}" />  
                                    <h:outputText value="#{messages.senderName}" rendered="#{messages.readByUser}" />
                                </p:column>  

                                <!--Message subject-->
                                <p:column headerText="Subject" sortBy="#{messages.title}" filterBy="#{messages.title}" filterStyle="width:300px" filterMatchMode="contains" style="border-left-color:transparent;border-right-color:transparent">  

                                    <h:outputText value="#{messages.title}" style="font-weight:bold" rendered="#{!messages.readByUser}" />  
                                    <h:outputText value="#{messages.title}" rendered="#{messages.readByUser}" /> 


                                </p:column>  


                                <!--DATE CREATED-->
                                <p:column sortBy="#{messages.dateCreated}" filterBy="#{messages.dateCreated}" filterStyle="width:200px" filterMatchMode="contains" style="border-left-color:transparent;border-right-color:transparent">
                                    <f:facet name="header">
                                        <h:outputText value="Date Created"/>
                                    </f:facet>
                                    <h:outputText value="#{messages.dateCreated}" style="font-weight:bold" rendered="#{!messages.readByUser}" />  
                                    <h:outputText value="#{messages.dateCreated}" rendered="#{messages.readByUser}" />

                                </p:column>

                                <p:column style="width:40px">  
                                    <p:commandLink update="display1" oncomplete="editDialog.show()" title="Edit Details">
                                        <p:graphicImage value="about_icon.png" style="width:20px;height:20px"/>
                                        <f:setPropertyActionListener value="#{messages}" target="#{MessageManagedBean.selectedViewMessage}" />  
                                        
                                    </p:commandLink>                                                                
                                </p:column>


                            </p:dataTable>
                            
                            <p:ajaxStatus style="width:16px;height:16px;">  
                                <f:facet name="start">  
                                    <h:graphicImage value="25(2).gif" />  
                                </f:facet>  

                                <f:facet name="complete">  
                                    <h:outputText value="" />  
                                </f:facet>  
                            </p:ajaxStatus>
                            </td>
                    </tr>
                  
                </table>
                
                
                        
                   <!--DIALOG FOR VIEW-->
                   <p:dialog header="#{MessageManagedBean.title}" modal="true" widgetVar="editDialog" resizable="false"  
                             width="600" showEffect="blind" hideEffect="blind">  
                     
                           <p:panel id="display1" style="font-family: Tahoma;font-size:12px;border-style: hidden" >
                            <center>
                                  <table style="width:400px;font-style: Tahoma;font-size: 12px" cellspacing="5px" >
                                   <tr>  
                                   <td style="text-align:left" ><h:outputText value="From" style="font-weight:bold"/></td>
                                   <td><h:outputText value=":"/></td>
                                   <td style="background-color: ghostwhite" ><h:outputText value="#{MessageManagedBean.selectedViewMessage.senderName}"/>
                                       <h:outputText value="        "/>
                                       <h:outputText value="#{MessageManagedBean.selectedViewMessage.senderId}" style="font-size:10px;font-style: italic"/>
                                   </td>
                                   </tr>
                                      
                                   <tr>  
                                   <td style="text-align:left" ><h:outputText value="Date" style="font-weight:bold"/></td>
                                   <td><h:outputText value=":"/></td>
                                   <td style="background-color: ghostwhite" ><h:outputText value=" #{MessageManagedBean.selectedViewMessage.dateCreated}"/></td>
                                   </tr>
                                      
                                   <tr>
                                   <td ><h:outputText value="Subject" style="font-weight:bold"/></td>
                                   <td><h:outputText value=":"/></td>
                                   <td style="background-color: ghostwhite" ><h:outputText value=" #{MessageManagedBean.selectedViewMessage.title}" /></td>
                                   </tr>
                                   
                               </table>
                             
                               <table style="border: 1px solid lightsteelblue;height:300px;width:400px; background-color: ghostwhite;font-family: Tahoma;font-size:12px" >   
                                 
                                   <tr><td style="vertical-align: top">
                                           <h:outputText value="#{MessageManagedBean.selectedViewMessage.body}" escape="false" /></td></tr>
                               </table>
                      </center>
                               <p:button style="text-align: right" value="Reply" outcome="createNewMessage"/>

                               <p:button style="text-align:right" value="Close" outcome="messages"/> 
 
                           </p:panel>

                       
                   </p:dialog>
                   

                   <!--DIALOG FOR DELETING SINGLE ROW OF Message--> 
                   <p:confirmDialog message="Are you sure you want to delete this message?"  
                                    showEffect="blind" hideEffect="explode"  
                                    header="Delete Message" severity="alert" widgetVar="messagedialog">  
                       <center>
                           <p:commandButton value="Yes" update="panel" ajax="true" immediate="true" oncomplete="messagedialog.hide()"  
                                            actionListener="#{MessageManagedBean.delete}" />  
                           <p:commandButton value="No" onclick="messagedialog.hide()" type="button" />   
                       </center>
                   </p:confirmDialog> 

                   <!--DIALOG FOR DELETING MULTIPLE ROW OF Messages-->
                   <p:dialog header="Delete Selected Records" modal="true" widgetVar="deleteDialog">

                       <h:outputText value="You are about to permanently delete records." /><br /><br />
                       <h:outputText value="Are you sure you want to continue?" /><br /><br/>

                       <center>
                           <p:commandButton value="Yes" ajax="true" immediate="true" update="panel" oncomplete="deleteDialog.hide()" actionListener="#{MessageManagedBean.deleteMessages}" />
                           <p:commandButton value="No" oncomplete="deleteDialog.hide()" action="#{MessageManagedBean.cancelDelete()}" /> 

                       </center>
                   </p:dialog>

            </div>
            <div id="bottom" class="bottom">
                <h:graphicImage value="/image/merlionfooter.jpg"/>
            </div>
        </h:form>
    </h:body>
    </f:view>
         </f:view>
</html>